Информационный ресурс для пользователей сайтов
созданных на системе управления сайтом TSAdmin

 

Как разместить аудио плеер на сайте

2 июля 2019

Советы

 

Данная инструкция, применима для сайтов, работающих на системе управления сайтами TSAdmin.

 

В данной статье, рассмотрим как загрузить аудио файл на сайт и разместить его для воспроизведения на странице сайта. Опустим подробности что это и как работает, сразу перейдем к делу, скажем только что будем использовать аудио теги поддерживаемые HTML5.

 

1. Загружаем аудио файл

 

Открываем систему управления сайтом TSAdmin, переходим в раздел "Файлы". По умолчанию открывается вкладка с изображениями, кликаем по вкладке "Показать файлы".

 

 

Правой клавишей мыши кликаем по папке "files".

 

 

В выпадающем списке выбираем "Создать папку".

 

 

Назовем папку "audio" и нажмем "Ок".

 

 

Выбираем папку кликнув по ней левой клавишей мыши и жмем "Загрузить".

 

 

Выбираем на компьютере файл который необходимо загрузить и добавляем его в папку.

 

Загруженный файл должен называться маленькими латинскими буквами и/или цифрами без использования сторонних символов и пробелов.

Папки в которые размещаются файлы, так же должны содержать только латинские символы и/или цифры.

 

Рекомендованные файлы с расширением .mp3

 

Загруженный файл будет выглядеть так:

 

 

Переходим на саму страницу, чтобы установить код плеера для воспроизведения этого файла.

 

2. Устанавливаем аудио плеер на страницу сайта

 

В структуре сайта находим страницу, на которой необходимо разместить плеер. Открываем ее. 

Текстовой редактор переключаем на "Источник".

 

 

В нужном месте вставляем следующий код:

 

<audio controls>

<source src="/upload/files/audio/fly.mp3">

<p>Ваш браузер не поддерживает аудио</p>

</audio>

 

Где /upload/files/audio/ это путь до файла а fly.mp3 это имя и расширение самого файла.

В редакторе это будет выглядеть так:

 

 

Кликаем "Сохранить".

 

 

В редакторе плеер будет выглядеть так:

 

 

На самом сайте установленный плеер будет выглядеть так:

 

 

Если у пользователя установлен устаревший браузер, который не поддерживает тег <audio>, будет отображаться сообщение «Ваш браузер не поддерживает аудио».

 

Что получилось у нас, вы можете оценить тут:

 

 

 


16 просмотров этой страницы
На сайте тсадмин.рф мы не собираем и не храним никакую информацию без вашего согласия.
Cookie используются для сбора статистики и информации технического характера и хранятся на вашем устройстве. Скрыть
Наверх страницы